<template>
  <ul>
    <li class="title">
      <span class="index"></span>
      <span class="action">操作</span>
      <span class="songName">标题</span>
      <span class="singer">歌手</span>
      <span class="album">专辑</span>
      <span class="time">时间</span>
    </li>
    <li
      :class="item.id == songID ? 'item active' : 'item'"
      v-for="(item, index) in songList"
      :key="item.id"
      @dblclick="playSong(item.id)"
    >
      <span class="index">{{ ++index }}</span>
      <span class="action"><i class="iconfont icon-aixin-xian"></i></span>
      <span class="songName">
        <i class="songname">{{ item.name }}</i>
        <span class="icon" v-show="item.mv>0" @click="toWatch(item.mv)">
          <i class="iconfont icon-video"></i
        ></span>
        <span class="vip" v-show="item.fee == 1"
          ><i class="iconfont icon-VIP"></i
        ></span>
      </span>
      <span class="singer" @click="toDetail(item.ar[0].id)">{{
        getAllsinger(item.ar)
      }}</span>
      <span class="album">{{ item.al.name }}</span>
      <span class="time">{{ getSongTime(item.dt) }}</span>
    </li>
  </ul>
</template>

<script>
import { getSheetListAllAPI } from "@/api";
export default {
  name: "SongListBase",
  props: ["id","playList"],
  data() {
    return {
      songList: [],
    };
  },
  methods: {
    // 播放歌曲
    playSong(id) {
      this.$store.dispatch("play/updateSongId", id);
      this.$store.dispatch("play/updateListAndIndex", this.songList);
    },
    // 获取歌曲列表
    async getSongList(id) {
      const res = await getSheetListAllAPI({ id });
      console.log(res);
      this.songList = res.data.songs;
    },
    //处理歌曲时间  参数单位毫秒
    getSongTime(time) {
      let secondSum = Math.floor(time / 1000);
      let min = Math.floor(secondSum / 60);
      let second = secondSum % 60;
      if (min < 10) {
        min = "0" + min;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return min + ":" + second;
    },
    //处理多位歌手
    getAllsinger(arr) {
      let singers = "";
      arr.forEach((item) => {
        singers += item.name;
        singers += "/";
      });
      return singers.slice(0, singers.length - 1);
    },
    // 去歌手详情
    toDetail(id) {
      this.$router.push({
        name: "detail",
        query: {
          id,
        },
      });
    },
    //去看MV
    toWatch(id) {
      this.$router.push({
        name: "watch",
        query: {
          id,
        },
      });
    },
  },
  watch: {
    id() {
      this.getSongList(this.id);
    },
  },
  computed: {
    songID() {
      return this.$store.state.play.id;
    },
  },
  // 组件创造时调用
  created() {
    if(!this.playList){
      this.getSongList(this.id);
    }else{
      this.songList = this.playList;
    }
  },
};
</script>

<style lang="less" scoped>
ul {
  width: 100%;
  font-size: 13px;
  color: #333;
  li {
    display: block;
    height: 35px;
    width: 100%;
    display: flex;
    user-select: none;
    span {
      display: block;
      color: #666;
      line-height: 35px;
      cursor: default;
    }
    .index {
      width: 4%;
      text-align: center;
      color: #999;
    }
    .action {
      width: 9%;
      text-align: center;
    }
    .songName {
      width: 32%;
      color: black;
      display: flex;
      i {
        font-style: normal;
        display: block;
      }
      .songname {
        max-width: 200px;
        overflow: hidden;
        word-wrap: break-word; /*强制换行*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
      .vip {
        width: 20px;
        height: 12px;
        color: #ff7a9e;
        margin-top: 1px;
        margin-left: 2px;
        i {
          font-size: 28px;
        }
      }
      .icon {
        margin-left: 5px;
        margin-top: 11px;
        cursor: default;
        width: 20px;
        height: 12px;
        color: #ff7a9e;
        cursor: pointer;
        i {
          margin-top: -10px;
          font-size: 16px;
          text-align: center;
        }
      }
      .vip {
        font-size: 12px;
      }
      .icon:hover {
        color: #f39db4;
      }
    }
    .singer {
      width: 18%;
      cursor: pointer;
      overflow: hidden;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
    .album {
      width: 20%;
      overflow: hidden;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
    .time {
      width: 7%;
      color: #999;
      overflow: hidden;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
  }
  li.active {
    background-color: rgb(229, 229, 229) !important;
    .songname {
      color: #ff7a9e;
    }
  }
  li:nth-child(2n) {
    background-color: rgb(249, 249, 249);
  }
  .item:hover {
    background-color: rgb(240, 241, 242);
  }
  .item .action:hover {
    color: black;
  }
}
</style>